<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="项目进度表" data-page-identification="e_mhdv4iy8nv">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_cc874syqn2 自定义模板_0tdzkmsbqd -->
            <!--审批详情-->
            <a-modal
                @cancel="statuState.visible = false"
                centered
                :visible="statuState.visible"
                title="审批详情"
                :footer="null"
                :body-style="{ maxHeight: '700px', overflowY: 'auto' }"
                width="400px"
            >
                <div class="status-item" v-for="(item, index) in statuState.list">
                    <div class="title-new-status">
                        <div class="left-title"
                            >审批类型:<span class="weight-status-new">{{ item.processName }} </span></div
                        >
                        <div class="right-title"
                            >审批提交时间:<span class="weight-status-new">{{ item.createdDate }} </span></div
                        >
                    </div>
                    <a-steps class="status-step" direction="vertical">
                        <a-step
                            v-for="(inside, index) in item.processTaskList"
                            :title="inside.nodeMessage"
                            :description="inside.taskName + ':' + inside.assignUserName"
                            :status="getIconStatus(inside.nodeStatus)"
                        />
                    </a-steps>
                </div>
            </a-modal>

            <!--审批详情-->
            <a-modal
                title="项目阶段详情"
                v-model:visible="state.detailVisible"
                width="1200px"
                :footer="null"
                centered
                @cancel="detailClose"
            >
                <div class="product-content">
                    <a-row class="row-size">
                        <a-col :span="6" class="row-size">
                            <a-form-item label="项目名称">
                                <a-tooltip>
                                    <template #title>{{ state.milepostMsg.projectName }}</template>
                                    <div class="detail-item too-long">{{ state.milepostMsg.projectName }}</div>
                                </a-tooltip>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" class="row-size">
                            <a-form-item label="项目阶段名称">
                                <div class="detail-item">{{ state.milepostMsg.milepostName }}</div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" class="row-size">
                            <a-form-item label="项目阶段状态">
                                <div class="detail-item">{{ state.milepostMsg.milepostStatus }}</div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" class="row-size">
                            <a-form-item label="项目经理">
                                <div class="detail-item">{{ state.milepostMsg.pmName }}</div>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row class="row-size">
                        <a-col :span="6" class="row-size">
                            <a-form-item label="计划开始时间">
                                <div class="detail-item">{{ state.milepostMsg.startTime }}</div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" class="row-size">
                            <a-form-item label="计划结束时间">
                                <div class="detail-item">{{ state.milepostMsg.endTime }}</div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" class="row-size">
                            <a-form-item label="实际开始时间">
                                <div class="detail-item">{{ state.milepostMsg.actualStartTime }}</div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" class="row-size">
                            <a-form-item label="实际结束时间">
                                <div class="detail-item">{{ state.milepostMsg.actualFinishTime }}</div>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row class="row-size">
                        <a-col :span="6" class="row-size">
                            <a-form-item label="计划工时">
                                <div class="detail-item">{{ state.milepostMsg.workingDaysNum }}</div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" class="row-size">
                            <a-form-item label="实际工时">
                                <div class="detail-item">{{ state.milepostMsg.actualWorkingDaysNum }}</div>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </div>
                <a-tabs v-model:activeKey="state.detailActiveKey" type="card">
                    <a-tab-pane key="1" tab="进行中任务">
                        <div class="default-table">
                            <a-table :columns="doingTaskColumns" :data-source="state.doingTask" bordered>
                                <template #bodyCell="{ column, text, record }">
                                    <template v-if="column.dataIndex === 'taskName'">
                                        <div class="task-name">
                                            <div
                                                v-if="record.mark === '里程碑'"
                                                :class="{
                                                    'task-milestone': record.mark === '里程碑',
                                                    'task-milestone-right':
                                                        record.mark === '里程碑' && record.critialPath
                                                }"
                                                >里程碑</div
                                            >
                                            <div
                                                v-else-if="record.mark === '初验'"
                                                :class="{
                                                    'task-first': record.mark === '初验',
                                                    'task-first-right': record.mark === '初验' && record.critialPath
                                                }"
                                            ></div>
                                            <div
                                                v-else-if="record.mark === '终验'"
                                                class="task-over"
                                                :class="{
                                                    'task-over': record.mark === '终验',
                                                    'task-over-right': record.mark === '终验' && record.critialPath
                                                }"
                                            ></div>
                                            <div v-if="record.critialPath" class="critical-path">关键路径</div>
                                            <div
                                                :class="{
                                                    'is-first-no': record.mark === null && !record.critialPath,
                                                    'is-first': record.mark !== null,
                                                    'is-first-path': record.mark !== null && record.critialPath,
                                                    'is-first-path-no-mark': record.mark === null && record.critialPath
                                                }"
                                            >
                                                <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                                                    <template #title>
                                                        <p style="color: #262626; margin: 0"
                                                            >{{ record.taskIndex }} {{ text }}</p
                                                        >
                                                    </template>
                                                    <span class="task-name-title"
                                                        >{{ record.taskIndex }} {{ text }}</span
                                                    >
                                                </a-tooltip>
                                            </div>
                                        </div>
                                    </template>
                                    <template v-if="column.dataIndex === 'taskStatus'">
                                        <div class="task-status-new" @click="getTaskStatus(record.taskId, 0)">
                                            <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                                            <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                                            <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                                            <div class="yq-btn" v-else-if="text === '延期'">延期</div>
                                            <div class="yqwc-btn" v-else-if="text === '延期完成'">延期完成</div>
                                            <div class="spz-btn" v-else-if="text === '审批中'">审批中</div>
                                            <div class="wqd-btn" v-else-if="text === '下线'">下线</div>
                                            <div v-else>{{ text }}</div>
                                        </div>
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="进行中行动项任务">
                        <div class="default-table">
                            <a-table :columns="doingActionTaskColumns" :data-source="state.doingActionTask" bordered>
                                <template #bodyCell="{ column, text, record }">
                                    <template v-if="column.dataIndex === 'taskStatus'">
                                        <div class="task-status-new" @click="getTaskStatus(record.actionTaskId, 1)">
                                            <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                                            <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                                            <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                                            <div class="yq-btn" v-else-if="text === '延期'">延期</div>
                                            <div class="yqwc-btn" v-else-if="text === '延期完成'">延期完成</div>
                                            <div class="spz-btn" v-else-if="text === '审批中'">审批中</div>
                                            <div class="wqd-btn" v-else-if="text === '下线'">下线</div>
                                            <div v-else>{{ text }}</div>
                                        </div>
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="3" tab="未关闭任务风险">
                        <div class="default-table">
                            <a-table :columns="riskColumns" :data-source="state.riskTask" bordered>
                                <template #bodyCell="{ column, text, record }">
                                    <!--                                    <template v-if="column.dataIndex === 'taskName'">-->
                                    <!--                                        <div class="task-name">-->
                                    <!--                                            <div-->
                                    <!--                                                v-if="record.mark === '里程碑'"-->
                                    <!--                                                :class="{-->
                                    <!--                                                    'task-milestone': record.mark === '里程碑',-->
                                    <!--                                                    'task-milestone-right':-->
                                    <!--                                                        record.mark === '里程碑' && record.critialPath-->
                                    <!--                                                }"-->
                                    <!--                                                >里程碑</div-->
                                    <!--                                            >-->
                                    <!--                                            <div-->
                                    <!--                                                v-else-if="record.mark === '初验'"-->
                                    <!--                                                :class="{-->
                                    <!--                                                    'task-first': record.mark === '初验',-->
                                    <!--                                                    'task-first-right': record.mark === '初验' && record.critialPath-->
                                    <!--                                                }"-->
                                    <!--                                            ></div>-->
                                    <!--                                            <div-->
                                    <!--                                                v-else-if="record.mark === '终验'"-->
                                    <!--                                                class="task-over"-->
                                    <!--                                                :class="{-->
                                    <!--                                                    'task-over': record.mark === '终验',-->
                                    <!--                                                    'task-over-right': record.mark === '终验' && record.critialPath-->
                                    <!--                                                }"-->
                                    <!--                                            ></div>-->
                                    <!--                                            <div v-if="record.critialPath" class="critical-path">关键路径</div>-->
                                    <!--                                            <div-->
                                    <!--                                                :class="{-->
                                    <!--                                                    'is-first-no': record.mark === null && !record.critialPath,-->
                                    <!--                                                    'is-first': record.mark !== null,-->
                                    <!--                                                    'is-first-path': record.mark !== null && record.critialPath,-->
                                    <!--                                                    'is-first-path-no-mark': record.mark === null && record.critialPath-->
                                    <!--                                                }"-->
                                    <!--                                            >-->
                                    <!--                                                <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">-->
                                    <!--                                                    <template #title>-->
                                    <!--                                                        <p style="color: #262626; margin: 0"-->
                                    <!--                                                            >{{ record.taskIndex }} {{ text }}</p-->
                                    <!--                                                        >-->
                                    <!--                                                    </template>-->
                                    <!--                                                    <span class="task-name-title"-->
                                    <!--                                                        >{{ record.taskIndex }} {{ text }}</span-->
                                    <!--                                                    >-->
                                    <!--                                                </a-tooltip>-->
                                    <!--                                            </div>-->
                                    <!--                                        </div>-->
                                    <!--                                    </template>-->
                                    <template v-if="column.dataIndex === 'taskStatus'">
                                        <div class="task-status-new" @click="getTaskStatus(record.taskId, 0)">
                                            <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                                            <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                                            <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                                            <div class="yq-btn" v-else-if="text === '延期'">延期</div>
                                            <div class="yqwc-btn" v-else-if="text === '延期完成'">延期完成</div>
                                            <div class="spz-btn" v-else-if="text === '审批中'">审批中</div>
                                            <div class="wqd-btn" v-else-if="text === '下线'">下线</div>
                                            <div v-else>{{ text }}</div>
                                        </div>
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="4" tab="未关闭行动项任务风险">
                        <div class="default-table">
                            <a-table :columns="riskActionColumns" :data-source="state.riskActionTask" bordered />
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </a-modal>
            <a-modal
                title="与项目关联的行动项任务"
                v-model:visible="state.actionTaskVisible"
                width="1200px"
                :footer="null"
                centered
            >
                <div class="default-table">
                    <a-table :columns="doingActionTaskColumns" :data-source="state.actionProjectData" bordered>
                        <template #bodyCell="{ column, text, record }">
                            <template v-if="column.dataIndex === 'taskStatus'">
                                <div class="task-status-new" @click="getTaskStatus(record.taskId, 0)">
                                    <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                                    <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                                    <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                                    <div class="yq-btn" v-else-if="text === '延期'">延期</div>
                                    <div class="yqwc-btn" v-else-if="text === '延期完成'">延期完成</div>
                                    <div class="spz-btn" v-else-if="text === '审批中'">审批中</div>
                                    <div class="wqd-btn" v-else-if="text === '下线'">下线</div>
                                    <div v-else>{{ text }}</div>
                                </div>
                            </template>
                        </template>
                    </a-table>
                </div>
            </a-modal>
            <div class="body">
                <div class="top">
                    <a-row class="row-size" :gutter="24">
                        <a-col :span="6" class="row-size">
                            <a-form-item label="项目名称">
                                <a-select
                                    style="max-width: 300px"
                                    v-model:value="state.projectName"
                                    show-search
                                    placeholder="请选择"
                                    allow-clear
                                    @focus="getProject"
                                    :filterOption="
                                        (input, option) => {
                                            return option.projectName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    :fieldNames="{
                                        label: 'projectName',
                                        value: 'projectId'
                                    }"
                                    :options="state.projectlist"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col class="row-size" :span="6">
                            <a-form-item label="项目状态">
                                <a-select
                                    v-model:value="state.projectStatus"
                                    :options="[
                                        { label: '进行中', value: '进行中' },
                                        { label: '完成', value: '完成' }
                                    ]"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col class="row-size" :span="6">
                            <a-space size="middle">
                                <a-button type="primary" @click="getTableData()">查询</a-button>
                                <a-button type="ghost" @click="resetTableData">重置</a-button>
                            </a-space>
                        </a-col>
                    </a-row>
                </div>
                <div class="content">
                    <div class="table-tip">
                        <div class="table-tip">
                            <div class="tip-title">模版项目进度看板 </div>
                            <div class="tip1"><span class="tip-msg">准备工作</span><div class="box1"></div></div>
                            <div class="tip2"><span class="tip-msg">启动工作</span><div class="box2"></div></div>
                            <div class="tip3"><span class="tip-msg">数据预处理</span><div class="box3"></div></div>
                            <div class="tip4"><span class="tip-msg">产品确认</span><div class="box4"></div></div>
                            <div class="tip5"><span class="tip-msg">数据建模</span><div class="box5"></div></div>
                            <div class="tip6"><span class="tip-msg">试运行</span><div class="box6"></div></div>
                            <div class="tip7"><span class="tip-msg">正试运行</span><div class="box7"></div></div>
                            <div class="tip8"><span class="tip-msg">变更时间</span><div class="box8"></div></div>
                        </div>
                        <div class="right-btn">
                            <a-button type="primary" size="small" style="margin-top: 18px" ghost @click="resetWidth"
                                >今天</a-button
                            >
                        </div>
                    </div>
                    <!--                 图表部分-->
                    <a-spin :spinning="spinLoading" title="加载中">
                        <div class="table_detail_wrapper">
                            <div class="product-wrapper flex">
                                <div class="product-list">
                                    <div class="table-title">项目概览</div>
                                    <div class="product-info" id="mainLeft">
                                        <div class="project-item" v-for="(projectItem, projectIndex) in state.list">
                                            <div class="center">
                                                <div class="pj-item flex1">
                                                    <div
                                                        class="project-status"
                                                        v-if="projectItem.projectStatus === '进行中'"
                                                        >{{ projectItem.projectStatus }}</div
                                                    >
                                                    <div class="xmwc-btn" v-if="projectItem.projectStatus === '完成'">{{
                                                        projectItem.projectStatus
                                                    }}</div>
                                                    <div
                                                        class="xmwqd-btn"
                                                        v-if="projectItem.projectStatus === '未启动'"
                                                        >{{ projectItem.projectStatus }}</div
                                                    >
                                                    <div class="xmyq-btn" v-if="projectItem.projectStatus === '延期'">{{
                                                        projectItem.projectStatus
                                                    }}</div>
                                                    <a-tooltip>
                                                        <template #title>{{ projectItem.projectName }}</template>
                                                        <div class="project-name">{{ projectItem.projectName }}</div>
                                                    </a-tooltip>
                                                </div>
                                                <div class="pj-item flex1"
                                                    >项目开始时间：{{ projectItem.startTime }}</div
                                                >

                                                <div class="pj-item flex1">计划终验时间：{{ projectItem.endTime }}</div>
                                                <div class="flex1 pj-item"
                                                    ><span style="width: 60%">项目完成进度：</span
                                                    ><a-progress
                                                        :percent="projectItem.finishProgress"
                                                        stroke-linecap="square"
                                                        strokeColor="#3875ff"
                                                        status="active"
                                                /></div>
                                                <div class="flex1 pj-item"
                                                    ><span style="width: 60%">项目成本进度：</span
                                                    ><a-progress
                                                        :percent="projectItem.costProgress"
                                                        stroke-linecap="square"
                                                        strokeColor="#B248F7"
                                                        status="active"
                                                /></div>
                                                <a
                                                    class="underline"
                                                    href="javaSscript:;"
                                                    @click="getActionList(projectItem.projectId)"
                                                    >与项目关联的行动项任务({{ projectItem.actionTaskCount }})</a
                                                >
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 这是日期 -->
                                <div class="date-warpper flex-1">
                                    <!-- 日期头部 -->
                                    <div class="date-header flex">
                                        <div :style="state.currentDayStyle" class="current-day">
                                            今天 <div class="borderTip"></div
                                        ></div>
                                        <div v-for="(days, month) in state.monthsWithDays" :key="month">
                                            <div class="month" v-if="month <= 12">
                                                {{ state.currentYear }}年{{ month }}月
                                            </div>
                                            <div class="month" v-else> {{ state.nextYear }}年{{ month - 12 }}月 </div>
                                            <div class="flex">
                                                <div v-for="day in days" :key="day" class="day-item">
                                                    {{ day }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="main" id="productInfoRight">
                                        <!-- 这里是进度 -->
                                        <!--                                    <div-->
                                        <!--                                        class="content-wrapper"-->
                                        <!--                                        v-for="(projectItem, projectIndex) in state.list"-->
                                        <!--                                        :key="projectIndex"-->
                                        <!--                                    >-->
                                        <!--                                        &lt;!&ndash; 准备中 &ndash;&gt;-->
                                        <!--                                        <div-->
                                        <!--                                            class="ready-wrapper"-->
                                        <!--                                            :style="calculateStyle(projectItem, projectIndex, 0)"-->
                                        <!--                                        >-->
                                        <!--                                            <div-->
                                        <!--                                                class="ready"-->
                                        <!--                                                :style="calculateWidth(projectItem, 0)"-->
                                        <!--                                                @click="getDetail(projectItem, 0)"-->
                                        <!--                                            >-->
                                        <!--                                                <div class="change" :style="dailyProgressData(projectItem, 0)"></div-->
                                        <!--                                            ></div>-->
                                        <!--                                            <div-->
                                        <!--                                                class="finish"-->
                                        <!--                                                :style="-->
                                        <!--                                                    calculateProgress(-->
                                        <!--                                                        projectItem,-->
                                        <!--                                                        0,-->
                                        <!--                                                        projectItem.children[0].finishProgress-->
                                        <!--                                                    )-->
                                        <!--                                                "-->
                                        <!--                                            >-->
                                        <!--                                                {{ projectItem.children[0].finishProgress }}%-->
                                        <!--                                            </div>-->
                                        <!--                                            <div-->
                                        <!--                                                class="cost"-->
                                        <!--                                                :style="-->
                                        <!--                                                    costProgressData(-->
                                        <!--                                                        projectItem,-->
                                        <!--                                                        0,-->
                                        <!--                                                        projectItem.children[0].costProgress-->
                                        <!--                                                    )-->
                                        <!--                                                "-->
                                        <!--                                            >-->
                                        <!--                                                {{-->
                                        <!--                                                    projectItem.children[0].costProgress-->
                                        <!--                                                        ? projectItem.children[0].costProgress-->
                                        <!--                                                        : 0-->
                                        <!--                                                }}%-->
                                        <!--                                            </div>-->
                                        <!--                                        </div>-->

                                        <!--                                        &lt;!&ndash; 开始 &ndash;&gt;-->
                                        <!--                                        <div-->
                                        <!--                                            class="start-wrapper"-->
                                        <!--                                            :style="calculateStyle(projectItem, projectIndex, 1)"-->
                                        <!--                                        >-->
                                        <!--                                            <div-->
                                        <!--                                                class="start"-->
                                        <!--                                                :style="calculateWidth(projectItem, 1)"-->
                                        <!--                                                @click="getDetail(projectItem, 1)"-->
                                        <!--                                            >-->
                                        <!--                                                <div class="change" :style="dailyProgressData(projectItem, 1)"></div>-->
                                        <!--                                            </div>-->
                                        <!--                                            <div-->
                                        <!--                                                class="finish"-->
                                        <!--                                                :style="-->
                                        <!--                                                    calculateProgress(-->
                                        <!--                                                        projectItem,-->
                                        <!--                                                        1,-->
                                        <!--                                                        projectItem.children[1].finishProgress-->
                                        <!--                                                    )-->
                                        <!--                                                "-->
                                        <!--                                            >-->
                                        <!--                                                {{ projectItem.children[1].finishProgress }}%-->
                                        <!--                                            </div>-->
                                        <!--                                            <div-->
                                        <!--                                                class="cost"-->
                                        <!--                                                :style="-->
                                        <!--                                                    costProgressData(-->
                                        <!--                                                        projectItem,-->
                                        <!--                                                        1,-->
                                        <!--                                                        projectItem.children[1].costProgress-->
                                        <!--                                                    )-->
                                        <!--                                                "-->
                                        <!--                                            >-->
                                        <!--                                                {{-->
                                        <!--                                                    projectItem.children[1].costProgress-->
                                        <!--                                                        ? projectItem.children[1].costProgress-->
                                        <!--                                                        : 0-->
                                        <!--                                                }}%-->
                                        <!--                                            </div>-->
                                        <!--                                        </div>-->
                                        <!--                                        &lt;!&ndash; 数据预处理 &ndash;&gt;-->
                                        <!--                                        <div-->
                                        <!--                                            class="preprocessing-wrapper"-->
                                        <!--                                            :style="calculateStyle(projectItem, projectIndex, 2)"-->
                                        <!--                                        >-->
                                        <!--                                            <div-->
                                        <!--                                                class="preprocessing"-->
                                        <!--                                                :style="calculateWidth(projectItem, 2)"-->
                                        <!--                                                @click="getDetail(projectItem, 2)"-->
                                        <!--                                            >-->
                                        <!--                                                <div class="change" :style="dailyProgressData(projectItem, 2)"></div>-->
                                        <!--                                            </div>-->
                                        <!--                                            <div-->
                                        <!--                                                class="finish"-->
                                        <!--                                                :style="-->
                                        <!--                                                    calculateProgress(-->
                                        <!--                                                        projectItem,-->
                                        <!--                                                        2,-->
                                        <!--                                                        projectItem.children[2].finishProgress-->
                                        <!--                                                    )-->
                                        <!--                                                "-->
                                        <!--                                            >-->
                                        <!--                                                {{ projectItem.children[2].finishProgress }}%-->
                                        <!--                                            </div>-->
                                        <!--                                            <div-->
                                        <!--                                                class="cost"-->
                                        <!--                                                :style="-->
                                        <!--                                                    costProgressData(-->
                                        <!--                                                        projectItem,-->
                                        <!--                                                        2,-->
                                        <!--                                                        projectItem.children[2].costProgress-->
                                        <!--                                                    )-->
                                        <!--                                                "-->
                                        <!--                                            >-->
                                        <!--                                                {{-->
                                        <!--                                                    projectItem.children[2].costProgress-->
                                        <!--                                                        ? projectItem.children[2].costProgress-->
                                        <!--                                                        : 0-->
                                        <!--                                                }}%-->
                                        <!--                                            </div>-->
                                        <!--                                        </div>-->
                                        <!--                                        &lt;!&ndash; 产品确认 &ndash;&gt;-->
                                        <!--                                        <div-->
                                        <!--                                            class="confirm-wrapper"-->
                                        <!--                                            :style="calculateStyle(projectItem, projectIndex, 3)"-->
                                        <!--                                            @click="getDetail(projectItem, 3)"-->
                                        <!--                                        >-->
                                        <!--                                            <div class="confirm" :style="calculateWidth(projectItem, 3)">-->
                                        <!--                                                <div class="change" :style="dailyProgressData(projectItem, 3)"></div>-->
                                        <!--                                            </div>-->
                                        <!--                                            <div-->
                                        <!--                                                class="finish"-->
                                        <!--                                                :style="-->
                                        <!--                                                    calculateProgress(-->
                                        <!--                                                        projectItem,-->
                                        <!--                                                        3,-->
                                        <!--                                                        projectItem.children[3].finishProgress-->
                                        <!--                                                    )-->
                                        <!--                                                "-->
                                        <!--                                            >-->
                                        <!--                                                {{ projectItem.children[3].finishProgress }}%-->
                                        <!--                                            </div>-->
                                        <!--                                            <div-->
                                        <!--                                                class="cost"-->
                                        <!--                                                :style="-->
                                        <!--                                                    costProgressData(-->
                                        <!--                                                        projectItem,-->
                                        <!--                                                        3,-->
                                        <!--                                                        projectItem.children[3].costProgress-->
                                        <!--                                                    )-->
                                        <!--                                                "-->
                                        <!--                                            >-->
                                        <!--                                                {{-->
                                        <!--                                                    projectItem.children[3].costProgress-->
                                        <!--                                                        ? projectItem.children[3].costProgress-->
                                        <!--                                                        : 0-->
                                        <!--                                                }}%-->
                                        <!--                                            </div>-->
                                        <!--                                        </div>-->
                                        <!--                                        &lt;!&ndash; 数据建模 &ndash;&gt;-->
                                        <!--                                        <div-->
                                        <!--                                            class="modeling-wrapper"-->
                                        <!--                                            :style="calculateStyle(projectItem, projectIndex, 4)"-->
                                        <!--                                            @click="getDetail(projectItem, 4)"-->
                                        <!--                                        >-->
                                        <!--                                            <div class="modeling" :style="calculateWidth(projectItem, 4)">-->
                                        <!--                                                <div class="change" :style="dailyProgressData(projectItem, 4)"></div>-->
                                        <!--                                            </div>-->
                                        <!--                                            <div-->
                                        <!--                                                class="finish"-->
                                        <!--                                                :style="-->
                                        <!--                                                    calculateProgress(-->
                                        <!--                                                        projectItem,-->
                                        <!--                                                        4,-->
                                        <!--                                                        projectItem.children[4].finishProgress-->
                                        <!--                                                    )-->
                                        <!--                                                "-->
                                        <!--                                            >-->
                                        <!--                                                {{ projectItem.children[4].finishProgress }}%-->
                                        <!--                                            </div>-->
                                        <!--                                            <div-->
                                        <!--                                                class="cost"-->
                                        <!--                                                :style="-->
                                        <!--                                                    costProgressData(-->
                                        <!--                                                        projectItem,-->
                                        <!--                                                        4,-->
                                        <!--                                                        projectItem.children[4].costProgress-->
                                        <!--                                                    )-->
                                        <!--                                                "-->
                                        <!--                                            >-->
                                        <!--                                                {{-->
                                        <!--                                                    projectItem.children[4].costProgress-->
                                        <!--                                                        ? projectItem.children[4].costProgress-->
                                        <!--                                                        : 0-->
                                        <!--                                                }}%-->
                                        <!--                                            </div>-->
                                        <!--                                        </div>-->
                                        <!--                                        &lt;!&ndash; 试运行 &ndash;&gt;-->
                                        <!--                                        <div-->
                                        <!--                                            class="test-run-wrapper"-->
                                        <!--                                            :style="calculateStyle(projectItem, projectIndex, 5)"-->
                                        <!--                                            @click="getDetail(projectItem, 5)"-->
                                        <!--                                        >-->
                                        <!--                                            <div class="test-run" :style="calculateWidth(projectItem, 5)">-->
                                        <!--                                                <div class="change" :style="dailyProgressData(projectItem, 5)"></div>-->
                                        <!--                                            </div>-->
                                        <!--                                            <div-->
                                        <!--                                                class="finish"-->
                                        <!--                                                :style="-->
                                        <!--                                                    calculateProgress(-->
                                        <!--                                                        projectItem,-->
                                        <!--                                                        5,-->
                                        <!--                                                        projectItem.children[5].finishProgress-->
                                        <!--                                                    )-->
                                        <!--                                                "-->
                                        <!--                                            >-->
                                        <!--                                                {{ projectItem.children[5].finishProgress }}%-->
                                        <!--                                            </div>-->
                                        <!--                                            <div-->
                                        <!--                                                class="cost"-->
                                        <!--                                                :style="-->
                                        <!--                                                    costProgressData(-->
                                        <!--                                                        projectItem,-->
                                        <!--                                                        5,-->
                                        <!--                                                        projectItem.children[5].costProgress-->
                                        <!--                                                    )-->
                                        <!--                                                "-->
                                        <!--                                            >-->
                                        <!--                                                {{-->
                                        <!--                                                    projectItem.children[5].costProgress-->
                                        <!--                                                        ? projectItem.children[5].costProgress-->
                                        <!--                                                        : 0-->
                                        <!--                                                }}%-->
                                        <!--                                            </div>-->
                                        <!--                                        </div>-->
                                        <!--                                        &lt;!&ndash;                  正试运行&ndash;&gt;-->
                                        <!--                                        <div-->
                                        <!--                                            class="run-wrapper"-->
                                        <!--                                            :style="calculateStyle(projectItem, projectIndex, 6)"-->
                                        <!--                                            @click="getDetail(projectItem, 6)"-->
                                        <!--                                        >-->
                                        <!--                                            <div class="run" :style="calculateWidth(projectItem, 6)">-->
                                        <!--                                                <div class="change" :style="dailyProgressData(projectItem, 6)"></div>-->
                                        <!--                                            </div>-->
                                        <!--                                            <div-->
                                        <!--                                                class="finish"-->
                                        <!--                                                :style="-->
                                        <!--                                                    calculateProgress(-->
                                        <!--                                                        projectItem,-->
                                        <!--                                                        6,-->
                                        <!--                                                        projectItem.children[6].finishProgress-->
                                        <!--                                                    )-->
                                        <!--                                                "-->
                                        <!--                                            >-->
                                        <!--                                                {{ projectItem.children[6].finishProgress }}%-->
                                        <!--                                            </div>-->
                                        <!--                                            <div-->
                                        <!--                                                class="cost"-->
                                        <!--                                                :style="-->
                                        <!--                                                    costProgressData(-->
                                        <!--                                                        projectItem,-->
                                        <!--                                                        6,-->
                                        <!--                                                        projectItem.children[6].costProgress-->
                                        <!--                                                    )-->
                                        <!--                                                "-->
                                        <!--                                            >-->
                                        <!--                                                {{-->
                                        <!--                                                    projectItem.children[6].costProgress-->
                                        <!--                                                        ? projectItem.children[6].costProgress-->
                                        <!--                                                        : 0-->
                                        <!--                                                }}%-->
                                        <!--                                            </div>-->
                                        <!--                                        </div>-->
                                        <!--                                    </div>-->

                                        <div
                                            class="content-wrapper"
                                            v-for="(projectItem, projectIndex) in state.list"
                                            :key="projectIndex"
                                        >
                                            <div
                                                v-for="phaseIndex in [0, 1, 2, 3, 4, 5, 6]"
                                                :key="phaseIndex"
                                                :class="getClassWrapper(phaseIndex)"
                                            >
                                                <div
                                                    v-if="isValidPhase(projectItem, phaseIndex)"
                                                    :class="getClass(phaseIndex)"
                                                    :style="calculateStyle(projectItem, projectIndex, phaseIndex)"
                                                    @click="getDetail(projectItem, phaseIndex)"
                                                >
                                                    <div
                                                        :class="getPhaseClass(phaseIndex)"
                                                        :style="calculateWidth(projectItem, phaseIndex)"
                                                    >
                                                        <div
                                                            class="change"
                                                            :style="dailyProgressData(projectItem, phaseIndex)"
                                                        ></div>
                                                    </div>
                                                    <div
                                                        class="finish"
                                                        :style="
                                                            calculateProgress(
                                                                projectItem,
                                                                phaseIndex,
                                                                projectItem.children[phaseIndex].finishProgress
                                                            )
                                                        "
                                                    >
                                                        {{ projectItem.children[phaseIndex].finishProgress }}%
                                                    </div>
                                                    <div
                                                        class="cost"
                                                        :style="
                                                            costProgressData(
                                                                projectItem,
                                                                phaseIndex,
                                                                projectItem.children[phaseIndex].costProgress
                                                            )
                                                        "
                                                    >
                                                        {{
                                                            projectItem.children[phaseIndex].costProgress
                                                                ? projectItem.children[phaseIndex].costProgress
                                                                : 0
                                                        }}%
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a-spin>
                    <!--                 图表部分-->
                </div>
            </div>
            <!-- end vid_cc874syqn2 自定义模板_0tdzkmsbqd -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    import { nextTick } from 'vue'
    onMounted(() => {
        state.dateList = getDays()
        const day = dayjs().diff(dayjs(state.dateList[0].date), 'day')
        state.currentDayStyle = {
            left: `${30 * day - 5}px`
        }
        nextTick(() => {
            const middle = document.querySelector('.date-warpper').clientWidth / 2
            document.querySelector('.date-warpper').scrollLeft = 30 * day - middle
            const mainLeft = document.querySelector('.main')
            const productInfoRight = document.querySelector('.product-info')
            mainLeft.addEventListener('scroll', syncScroll)
            productInfoRight.addEventListener('scroll', syncScroll)
        })
        initializeMonthsWithDays()
        getTableData()
    })
    function resetWidth() {
        const day = dayjs().diff(dayjs(state.dateList[0].date), 'day')
        const middle = document.querySelector('.date-warpper').clientWidth / 2
        document.querySelector('.date-warpper').scrollLeft = 30 * day - middle
    }

    const standardStyle = {
        maxWidth: 'unset'
    }
    // function getDays() {
    //     const currentYear = new Date().getFullYear() // 获取当前年份
    //     return Array.from({ length: 6 }, (v, i) => {
    //         const date = new Date(currentYear, i + 1, 0) // 设置日期为下月的第0天，即当前月的最后一天
    //         return {
    //             date: `${currentYear}-${(i + 1).toString().padStart(2, '0')}`, // 格式化月份为 "yyyy-mm"
    //             days: date.getDate() // 获取当月的天数
    //         }
    //     })
    // }
    function getDays() {
        const currentYear = new Date().getFullYear() // 获取当前年份
        const nextYear = currentYear + 1 // 下一年
        const monthsToGet = 12 * 2 // 当前年和下一年共24个月

        return Array.from({ length: monthsToGet }, (v, i) => {
            const year = i < 12 ? currentYear : nextYear // 前12个月为当前年，后12个月为下一年
            const month = (i % 12) + 1 // 月份在1到12之间
            const date = new Date(year, month, 0) // 设置日期为下月的第0天，即当前月的最后一天
            return {
                date: `${year}-${month.toString().padStart(2, '0')}`, // 格式化月份为 "yyyy-mm"
                days: date.getDate() // 获取当月的天数
            }
        })
    }
    const initializeMonthsWithDays = () => {
        for (let month = 1; month <= 24; month++) {
            state.monthsWithDays[month] = getDaysInMonth(month, state.currentYear)
        }
    }
    const getDaysInMonth = (month, year) => {
        return Array.from({ length: new Date(year, month, 0).getDate() }, (_, i) => i + 1)
    }
    const state = reactive({
        projectName: undefined,
        projectStatus: '',
        projectNameList: [],
        detailVisible: false,
        detailActiveKey: '1',
        doingTask: [],
        doingActionTask: [],
        riskTask: [],
        riskActionTask: [],
        actionTaskVisible: false,
        actionProjectData: [],
        chartData: [],
        currentYear: new Date().getFullYear(),
        nextYear: new Date().getFullYear() + 1,
        monthsWithDays: {},
        list: [],
        dateList: [],
        currentDayStyle: {},
        milepostMsg: {},
        projectlist: []
    })
    const doingTaskColumns = [
        {
            title: '任务名称',
            dataIndex: 'taskName',
            ellipsis: true,
            resizable: false,
            width: '200px',
            fixed: 'left',
            align: 'left'
        },
        {
            title: '任务状态',
            dataIndex: 'taskStatus',
            resizable: false,
            ellipsis: false,
            width: '140px',
            align: 'center'
        },
        {
            title: '任务负责人',
            dataIndex: 'taskOwner',
            resizable: false,
            ellipsis: true,
            width: '140px',
            align: 'center'
        },
        {
            title: '审核员',
            dataIndex: 'assessorName',
            resizable: false,
            ellipsis: true,
            width: '140px',
            align: 'center'
        },

        {
            title: '任务执行人',
            resizable: false,
            dataIndex: 'taskParticipantStr',
            ellipsis: true,
            width: '140px',
            align: 'center'
        },
        {
            title: '计划开始',
            dataIndex: 'startTime',
            resizable: false,
            ellipsis: true,
            width: '140px',
            align: 'center'
        },
        {
            title: '实际开始',
            dataIndex: 'actualStarTime',
            resizable: false,
            ellipsis: true,
            width: '120px',
            align: 'center'
        },
        {
            title: '计划完成',
            dataIndex: 'endTime',
            ellipsis: true,
            width: '120px',
            resizable: false,
            align: 'center'
        }
    ]
    const riskColumns = [
        {
            title: '任务名称',
            dataIndex: 'taskName',
            ellipsis: true,
            resizable: false,
            width: '220px',
            fixed: 'left',
            align: 'left'
        },
        {
            title: '风险描述',
            dataIndex: 'riskDescription',
            resizable: false,
            ellipsis: true,
            width: '140px',
            align: 'center'
        },
        {
            title: '解决方案',
            dataIndex: 'solution',
            resizable: false,
            ellipsis: true,
            width: '140px',
            align: 'center'
        },
        { title: '提交人', dataIndex: 'createdBy', align: 'center' },
        { title: '提交时间', dataIndex: 'createdTime', align: 'center' }
    ]
    const riskActionColumns = [
        {
            title: '行动项任务名称',
            dataIndex: 'actionTaskName',
            ellipsis: true,
            resizable: false,
            width: '220px',
            fixed: 'left',
            align: 'left'
        },
        {
            title: '风险描述',
            dataIndex: 'riskDescription',
            resizable: false,
            ellipsis: true,
            width: '140px',
            align: 'center'
        },
        {
            title: '解决方案',
            dataIndex: 'solution',
            resizable: false,
            ellipsis: true,
            width: '140px',
            align: 'center'
        },
        { title: '提交人', dataIndex: 'createdBy', align: 'center' },
        { title: '提交时间', dataIndex: 'createdTime', align: 'center' }
    ]
    const doingActionTaskColumns = [
        {
            title: '行动项任务名称',
            dataIndex: 'actionTaskName',
            ellipsis: true,
            width: '180px',
            fixed: 'left',
            align: 'left'
        },
        {
            title: '任务状态',
            dataIndex: 'taskStatus',
            resizable: false,
            ellipsis: false,
            width: '120px',
            align: 'center'
        },
        {
            title: '任务负责人',
            dataIndex: 'taskOwner',
            resizable: false,
            ellipsis: true,
            width: '120px',
            align: 'center'
        },
        {
            title: '审核员',
            dataIndex: 'assessorName',
            resizable: false,
            ellipsis: true,
            width: '120px',
            align: 'center'
        },
        {
            title: 'PMO',
            dataIndex: 'projectManagementOffice',
            resizable: false,
            ellipsis: true,
            width: '120px',
            align: 'center'
        },
        {
            title: '任务执行人',
            resizable: false,
            dataIndex: 'taskParticipantStr',
            ellipsis: true,
            width: '120px',
            align: 'center'
        },
        {
            title: '计划开始',
            dataIndex: 'startTime',
            resizable: false,
            ellipsis: true,
            width: '120px',
            align: 'center'
        },
        {
            title: '实际开始',
            dataIndex: 'examPassTime',
            resizable: false,
            ellipsis: true,
            width: '120px',
            align: 'center'
        },
        {
            title: '计划完成',
            dataIndex: 'endTime',
            ellipsis: true,
            width: '120px',
            resizable: false,
            align: 'center'
        }
    ]
    const spinLoading = ref(true)
    function getTableData() {
        spinLoading.value = true
        post('/solution-ppm/api/v2/built-in-system-ppm/project/dashboard/search', {
            projectId: state.projectName,
            status: state.projectStatus
        })
            .then(data => {
                state.list = data.data
            })
            .finally(() => {
                spinLoading.value = false
            })
    }

    function resetTableData() {
        ;(state.projectName = undefined), (state.projectStatus = '')
        getTableData()
    }
    function getFirstDayOfYear() {
        const currentYear = dayjs().year()
        return `${currentYear}-01-01`
    }
    // function calculateStyle(projectItem, projectIndex, phaseIndex) {
    //     console.log(phaseIndex, 'phaseIndex');
    //     const startDate = getFirstDayOfYear();
    //     const phaseStartDate = dayjs(projectItem?.children?.[phaseIndex]?.startTime ?? new Date());
    //     const daysDifference = phaseStartDate.diff(startDate, 'day');
    //     const left = daysDifference * 30;
    //     if (phaseIndex === 0) {
    //         return {
    //             position: 'absolute',
    //             left: `${left}px`,
    //             top: '10px'
    //         };
    //     } else {
    //         return {
    //             position: 'absolute',
    //             left: `${left}px`,
    //             top: `${phaseIndex * 42 + 10}px`
    //         };
    //     }
    // }
    //
    // function calculateWidth(projectItem, phaseIndex) {
    //     const startDate = dayjs(projectItem?.children?.[phaseIndex]?.startTime ?? new Date());
    //     const endDate = dayjs(projectItem?.children?.[phaseIndex]?.endTime ?? new Date());
    //     const daysDifference = endDate.diff(startDate, 'day');
    //     const width = Number(daysDifference + 1) * 30;
    //     return {
    //         width: `${width}px`
    //     };
    // }
    //
    // function calculateProgress(projectItem, phaseIndex, progressNum) {
    //     const startDate = dayjs(projectItem?.children?.[phaseIndex]?.startTime ?? new Date());
    //     const endDate = dayjs(projectItem?.children?.[phaseIndex]?.endTime ?? new Date());
    //     const daysDifference = endDate.diff(startDate, 'day');
    //     const progress = (progressNum / 100) * Number(daysDifference + 1) * 30;
    //     return {
    //         width: `${progress}px`
    //     };
    // }
    //
    // function costProgressData(projectItem, phaseIndex, costProgress = 0) {
    //     const startDate = dayjs(projectItem?.children?.[phaseIndex]?.startTime ?? new Date());
    //     const endDate = dayjs(projectItem?.children?.[phaseIndex]?.endTime ?? new Date());
    //     const daysDifference = endDate.diff(startDate, 'day');
    //     const progress = (costProgress / 100) * Number(daysDifference + 1) * 30;
    //     return {
    //         width: `${progress}px`
    //     };
    // }
    //
    // function dailyProgressData(projectItem, phaseIndex) {
    //     const startDate = dayjs(projectItem?.children?.[phaseIndex]?.endTime ?? new Date());
    //     const endDate = dayjs(projectItem?.children?.[phaseIndex]?.alterEndTime ?? new Date());
    //     if (endDate.isValid()) {
    //         const s1 = dayjs(projectItem?.children?.[phaseIndex]?.startTime ?? new Date());
    //         const e1 = dayjs(projectItem?.children?.[phaseIndex]?.endTime ?? new Date());
    //         const dfSt = e1.diff(s1, 'day');
    //         let dfStW = dfSt * 30;
    //         const daysDifference = endDate.diff(startDate, 'day');
    //         const progress = Number(daysDifference + 1) * 30;
    //         return {
    //             width: `${progress - 30}px`,
    //             left: `${dfStW + 30}px`
    //         };
    //     }
    //     return {
    //         width: '0px',
    //         left: '0px'
    //     };
    // }
    const getClassWrapper = phaseIndex => {
        const classes = [
            'ready-wrapper',
            'start-wrapper',
            'preprocessing-wrapper',
            'confirm-wrapper',
            'modeling-wrapper',
            'test-run-wrapper',
            'run-wrapper'
        ]
        return classes[phaseIndex]
    }

    const getClass = phaseIndex => {
        const classes = ['ready', 'start', 'preprocessing', 'confirm', 'modeling', 'test-run', 'run']
        return classes[phaseIndex]
    }

    const getPhaseClass = phaseIndex => {
        const classes = ['ready', 'start', 'preprocessing', 'confirm', 'modeling', 'test-run', 'run']
        return classes[phaseIndex]
    }
    const isValidPhase = (projectItem, phaseIndex) => {
        if (!projectItem.children || !projectItem.children[phaseIndex]) return false
        const { startTime, endTime, finishProgress, costProgress } = projectItem.children[phaseIndex]
        if (!dayjs(startTime).isValid() || !dayjs(endTime).isValid()) return false
        if (finishProgress === undefined || costProgress === undefined) return false
        return true
    }

    const calculateStyle = (projectItem, projectIndex, phaseIndex) => {
        if (!isValidPhase(projectItem, phaseIndex)) return {}
        const startDate = getFirstDayOfYear()
        const phaseStartDate = dayjs(projectItem.children[phaseIndex].startTime)
        const daysDifference = phaseStartDate.diff(startDate, 'day')
        const left = daysDifference * 30
        return {
            position: 'absolute',
            left: `${left}px`,
            top: phaseIndex === 0 ? '10px' : `${phaseIndex * 42 + 10}px`
        }
    }

    const calculateWidth = (projectItem, phaseIndex) => {
        if (!isValidPhase(projectItem, phaseIndex)) return { width: '0px' }
        const startDate = dayjs(projectItem.children[phaseIndex].startTime)
        const endDate = dayjs(projectItem.children[phaseIndex].endTime)
        const daysDifference = endDate.diff(startDate, 'day')
        return { width: `${(daysDifference + 1) * 30}px` }
    }

    const calculateProgress = (projectItem, phaseIndex, progressNum) => {
        if (!isValidPhase(projectItem, phaseIndex)) return { width: '0px' }
        const startDate = dayjs(projectItem.children[phaseIndex].startTime)
        const endDate = dayjs(projectItem.children[phaseIndex].endTime)
        const daysDifference = endDate.diff(startDate, 'day')
        return { width: `${(progressNum / 100) * (daysDifference + 1) * 30}px` }
    }

    const costProgressData = (projectItem, phaseIndex, costProgress = 0) => {
        if (!isValidPhase(projectItem, phaseIndex)) return { width: '0px' }
        const startDate = dayjs(projectItem.children[phaseIndex].startTime)
        const endDate = dayjs(projectItem.children[phaseIndex].endTime)
        const daysDifference = endDate.diff(startDate, 'day')
        return { width: `${(costProgress / 100) * (daysDifference + 1) * 30}px` }
    }

    const dailyProgressData = (projectItem, phaseIndex) => {
        if (!isValidPhase(projectItem, phaseIndex)) return { width: '0px', left: '0px' }
        const startDate = dayjs(projectItem.children[phaseIndex].endTime)
        const endDate = dayjs(projectItem.children[phaseIndex].alterEndTime)
        if (endDate.isValid()) {
            const initialStartDate = dayjs(projectItem.children[phaseIndex].startTime)
            const initialEndDate = dayjs(projectItem.children[phaseIndex].endTime)
            const initialDaysDifference = initialEndDate.diff(initialStartDate, 'day')
            const initialWidth = initialDaysDifference * 30
            const daysDifference = endDate.diff(startDate, 'day')
            return {
                width: `${(daysDifference + 1) * 30 - 30}px`,
                left: `${initialWidth + 30}px`
            }
        }
        return { width: '0px', left: '0px' }
    }
    function getActionList(id) {
        post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/list/${id}`, {}).then(data => {
            if (data.code === 200) {
                state.actionProjectData = data.data.dataList
                state.actionTaskVisible = true
            } else {
                message.error(data.message)
            }
        })
    }
    function getDetail(item, index) {
        const milepostId = item.children[index].milepostId
        const projectId = item.projectId
        post('/solution-ppm/api/v2/built-in-system-ppm/project/stage/search', {
            milepostName: item.children[index].milepostName,
            projectId: projectId
        }).then(data => {
            if (data.data) {
                state.milepostMsg = data?.data[0] || {}
                state.milepostMsg.pmName = item.pmName
                state.milepostMsg.projectName = item.projectName
            }
            state.detailVisible = true
        })
        // 进行中任务
        post('/solution-ppm/api/v2/built-in-system-ppm/project/dashboard/task/search', {
            milepostId: milepostId,
            projectId: projectId
        }).then(data => {
            state.doingTask = data.data
        })
        //   进行中行动项任务
        post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/list/${projectId}`, {
            milepostId: milepostId,
            isRunning: '是'
        }).then(data => {
            state.doingActionTask = data.data.dataList
        })
        // 未关闭任务风险
        post('/solution-ppm/api/v2/built-in-system-ppm/project/dashboard/task/queryRisk', {
            projectId: projectId,
            milepostId: milepostId
        }).then(data => {
            state.riskTask = data.data
        })
        // 行动项风险
        post(
            `/solution-ppm/api/v2/built-in-system-ppm/project/dashboard/action_task/warn_list/${projectId}/${milepostId}`,
            {}
        ).then(data => {
            state.riskActionTask = data.data
        })
    }

    // Function to sync scroll
    function syncScroll(event) {
        const percentageScrolled = event.target.scrollTop / (event.target.scrollHeight - event.target.clientHeight)

        productInfoRight.scrollTop =
            percentageScrolled * (productInfoRight.scrollHeight - productInfoRight.clientHeight)
        mainLeft.scrollTop = percentageScrolled * (mainLeft.scrollHeight - mainLeft.clientHeight)
    }

    // Add scroll event listeners to both divs
    function getProject() {
        get('/solution-ppm/api/v2/built-in-system-ppm/project/dashboard/factory_project/search').then(data => {
            state.projectlist = data.data
        })
    }
    function detailClose() {
        state.detailVisible = false
        state.detailActiveKey = '1'
    }

    const statuState = reactive({
        visible: false,
        list: []
    })
    function getTaskStatus(id, type) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/refactoring_task/task_approval_detail/${id}/${type}    `).then(
            data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                statuState.visible = true
                statuState.list = data.data
            }
        )
    }

    const getIconStatus = status => {
        if (status === 'finish') {
            return 'finish'
        } else if (status === 'process') {
            return 'process'
        } else {
            return 'error'
        }
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    .body {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .row-size {
        height: 32px;
        margin-bottom: 12px;
    }
    .top {
        background-color: #fff;
        height: 64px;
        border-radius: 2px;
        padding: 19px 24px;
        margin-bottom: 16px;
    }
    .content {
        background-color: #fff;
        padding: 16px 24px;
    }
    .table-tip {
        display: flex;
        height: 53px;
        justify-content: space-between;
    }
    .tip-title {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
        line-height: 53px;
    }
    .tip1,
    .tip2,
    .tip3,
    .tip4,
    .tip5,
    .tip6,
    .tip7,
    .tip8 {
        height: 20px;
        margin: 16px 0 16px 24px;
        display: flex;
    }
    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6,
    .box7,
    .box8 {
        background: #ffe58f;
        width: 32px;
        height: 8px;
        margin-top: 7px;
        margin-left: 4px;
    }
    .box2 {
        background: #c7f870;
    }
    .box3 {
        background: #77f2a3;
    }
    .box4 {
        background: #87e9de;
    }
    .box5 {
        background: #90cbff;
    }
    .box6 {
        background: #d3adf7;
    }
    .box7 {
        background: #ffadd3;
    }
    .box8 {
        background: #ff2a00;
    }
    .tip-msg {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
    }
    .detail-item {
        font-size: 14px;
        color: #000000;
        line-height: 22px;
        font-weight: 500;
    }
    .default-table {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .default-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #3875ff;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #fff;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-thead
        > tr:not(:last-child)
        > th {
        border-bottom: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-thead
        > tr
        > th {
        border-right: 1px solid #d9d9d9;
    }

    /* 将表格自带的左边框取消，方便设置表头边框颜色和内容边框颜色 */
    .default-table :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container {
        border-left: none;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-thead
        > tr
        > th[colstart='0']:first-child {
        border-left: 1px solid #d9d9d9;
    }

    /* 开启粘性表头后，表格结构会发生变化 需另外处理 */
    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-header
        table {
        border-top: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        > .@{ant-prefix}-table-content
        > table {
        border-top: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table-thead)
        > tr
        > th:not(:last-child):not(.@{ant-prefix}-table-selection-column):not(
            .@{ant-prefix}-table-row-expand-icon-cell
        ):not([colspan])::before {
        background: #d9d9d9;
        width: 1px;
    }

    /*表格*/
    .default-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #595959;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;

        .cell-wrapper {
            padding: 0 16px;
        }
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-tbody
        tr
        > td {
        border-right: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-tbody
        tr
        > td:first-child {
        border-left: 1px solid #d9d9d9;
    }
    .wqd-btn,
    .yq-btn,
    .wc-btn,
    .yqwc-btn,
    .jxz-btn,
    .spz-btn {
        background: #ffffff;
        border-radius: 2px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        letter-spacing: 0;
        text-align: center;
        line-height: 40px;
        font-weight: 400;
        width: 66px;
        height: 22px;
        line-height: 22px;
        margin: 0 auto;
    }
    .wc-btn {
        border: 1px solid rgba(48, 191, 120, 1);
        color: #30bf78;
    }

    .yq-btn {
        border: 1px solid rgba(224, 32, 32, 1);
        color: #e02020;
    }

    .wqd-btn {
        border: 1px solid rgba(140, 140, 140, 1);
        color: #8c8c8c;
    }

    .jxz-btn {
        border: 1px solid rgba(56, 117, 255, 1);
        color: #3875ff;
    }

    .yqwc-btn {
        border: 1px solid rgba(255, 152, 70, 1);
        color: #ff9846;
    }

    .spz-btn {
        border: 1px solid #00b4ec;
        color: #00b4ec;
    }
    .flex {
        display: flex;
        position: relative;
    }
    .flex-1 {
        flex: 1;
        overflow: auto;
    }

    .day-item {
        width: 30px;
        height: 30px;
        width: 30px;
        height: 30px;
        border: 1px solid #eaeaea;
        line-height: 30px;
        text-align: center;
    }
    .content-wrapper {
        width: 21900px;
        padding: 4px;
        position: relative;
        height: 310px;
        border-bottom: 1px solid #bfbfbf;
    }

    .finish,
    .cost {
        line-height: 12px;
        color: #fff;
        font-size: 10px;
        padding-left: 5px;
    }
    .finish {
        height: 12px;
        background-color: #3875ff;
    }
    .cost {
        height: 12px;
        background-color: #b248f7;
    }
    .ready {
        height: 12px;
        background-color: #ffe58f;
        position: relative;
    }
    .start {
        height: 12px;
        background-color: #c7f870;
        position: relative;
    }
    .preprocessing {
        height: 12px;
        background-color: #77f2a3;
        position: relative;
    }
    .confirm {
        height: 12px;
        background-color: #87e9de;
        position: relative;
    }
    .modeling {
        height: 12px;
        background-color: #90cbff;
        position: relative;
    }
    .test-run {
        height: 12px;
        background-color: #d3adf7;
        position: relative;
    }
    .run {
        height: 12px;
        background-color: #ffadd3;
        position: relative;
    }
    .month {
        text-align: center;
        background: rgba(56, 117, 255, 0.2);
        height: 30px;
        line-height: 30px;
        border-right: #bfbfbf 1px solid;
    }
    .table-title {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        text-align: center;
        height: 60px;
        line-height: 60px;
        background: rgba(56, 117, 255, 0.2);
    }
    .product-list {
        box-shadow: 3px 0 5px -2px rgba(0, 0, 0, 0.3); /* Right shadow */
        border-left: 1px solid #d9d9d9;
    }
    .current-day {
        background-color: #4874f6;
        color: #fff;
        position: absolute;
        width: 36px;
        height: 21px;
        line-height: 21px;
        textalign: center;
        background: #3875ff;
        letterspacing: 0;
        borderradius: 2px;
        fontsize: 14px;
        text-align: center;
    }
    .today {
        border-right: 1px solid #4874f6;
    }
    .project-item {
        height: 310px;
        padding: 16px;
        background-color: #fff;
        border-bottom: 1px solid #d9d9d9;
        display: flex;
        align-items: start;
    }

    .project-name {
        display: inlie-block;
        min-width: 70px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-left: 12px;
        line-height: 24px;
    }
    .mgb {
        margin: 10px 0;
    }
    .underline {
        color: #3875ff;
        text-decoration: underline;
    }
    .flex1 {
        display: flex;
        justify-content: start;
    }
    .pj-item {
        margin: 10px 0;
    }
    .pj-item:first-child {
        margin: 0;
    }
    .center {
        width: 100%;
    }
    .change {
        background-color: #ff2a00;
        height: 12px;
        position: absolute;
        right: 0;
    }
    .too-long {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        width: 210px;
        margin-top: 5px;
    }
    .main {
        height: 560px;
        min-width: 21900px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .product-info {
        width: 300px;
        height: 560px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .product-info::-webkit-scrollbar {
        width: 0; /* 隐藏垂直滚动条 */
    }
    .borderTip {
        border-right: 1px dashed #4874f6;
        height: 650px;
        position: relative;
        z-index: 999;
    }
    .task-name-title {
        display: inlie-block;
        min-width: 50px;
    }
    .task-milestone {
        position: absolute;
        top: 13px;
        left: 9px;
        width: 45px;
        height: 14px;
        font-size: 12px;
        line-height: 14px; /* 与高度相同 */
        color: #3875ff;
        background: #ebf1ff;
        text-align: center;
    }
    .task-milestone-right {
        left: 70px;
    }
    .task-first {
        position: absolute;
        top: 13px;
        left: 16px;
        width: 32px;
        height: 14px;
        background-image: url('http://10.40.0.33:9001/file-storage/422482758234415104.png');
        background-size: cover;
    }
    .task-first-right {
        position: absolute;
        top: 13px;
        left: 70px;
        width: 32px;
        height: 14px;
        background-image: url('http://10.40.0.33:9001/file-storage/422482758234415104.png');
        background-size: cover;
    }
    .task-over {
        position: absolute;
        top: 13px;
        left: 16px;
        width: 32px;
        height: 14px;
        background-image: url('http://10.40.0.33:9001/file-storage/422482777140240384.png');
        background-size: cover;
    }
    .task-over-right {
        position: absolute;
        top: 13px;
        left: 70px;
        width: 32px;
        height: 14px;
        background-image: url('http://10.40.0.33:9001/file-storage/422482777140240384.png');
        background-size: cover;
    }
    /*关键路径*/
    .critical-path {
        position: absolute;
        top: 13px;
        left: 5px;
        font-size: 12px;
        width: 60px;
        height: 14px;
        line-height: 14px; /* 与高度相同 */
        color: #ff9846;
        background: #fff5ed;
        text-align: center;
    }
    .is-first {
        margin-left: 55px;
    }

    .is-first-no {
        margin-left: 16px;
    }
    .is-first-path {
        margin-left: 115px;
    }
    .is-first-path-no-mark {
        margin-left: 70px;
    }
    .task-name-title {
        display: inlie-block;
        min-width: 50px;
    }
    .xmyq-btn,
    .xmwc-btn {
        background: rgba(24, 194, 255, 0.1);
        border-radius: 2px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        letter-spacing: 0;
        text-align: center;
        font-weight: 700;
        width: 60px;
        height: 24px;
        line-height: 24px;
        margin: 0 auto;
        display: inline-block;
    }

    .xmwqd-btn,
    .xmjxz-btn {
        border-radius: 2px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        letter-spacing: 0;
        text-align: center;
        font-weight: 700;
        width: 60px;
        height: 24px;
        line-height: 24px;
        margin: 0 auto;
        display: inline-block;
    }

    .xmjxz-btn {
        border: 1px solid rgba(24, 194, 255, 1);
        color: #18c2ff !important;
        background: rgba(24, 194, 255, 0.1);
    }

    .xmwc-btn {
        border: 1px solid rgba(82, 196, 26, 1);
        color: #52c41a !important;
        background: #edf9e8;
    }

    .xmyq-btn {
        border: 1px solid rgba(245, 34, 45, 0.5);
        color: #f5222d !important;
        background: rgba(245, 34, 45, 0.1);
    }

    .xmwqd-btn {
        border: 1px solid rgba(140, 140, 140, 1);
        color: #8c8c8c !important;
    }
    .project-status {
        background: rgba(82, 196, 26, 0.2);
        border-radius: 2px;
        width: 60px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        font-size: 14px;
        color: #52c41a;
        letter-spacing: 0;
        font-weight: 700;
    }
    :deep(.ant3-progress-inner) {
        border-radius: 0;
    }
    .date-warpper {
        position: relative;
        overflow-y: hidden;
    }
    .scroll-bar {
        position: absolute;
        height: 100px;
        width: 7px;
        background-color: #b6b7b9;
        border-radius: 2px;
        right: 0;
        top: 60px;
    }

    /*样式*/

    .title-new-status {
        height: 62px;
        line-height: 36px;
        padding: 0 16px;
        margin-bottom: 16px;
        background-image: url('http://10.40.0.33:9001/file-storage/457843108093009920.png');
        background-size: cover;
        border: 1px solid #3875ff;
        border-radius: 5px;
    }

    :deep(.ant3-steps-item-container) {
        padding: 0 16px;
    }
    :deep(.ant3-steps-item-tail::after) {
        margin-left: 12px;
        background-color: #3875ff;
    }
    :deep(.ant3-steps-item-description) {
        font-size: 12px;
        color: #595959;
        text-align: left;
        line-height: 20px;
        font-weight: 400;
    }
    :deep(.ant3-steps-item-icon) {
        width: 24px;
        height: 24px;
        line-height: 24px;
        color: #3875ff;
        margin-top: 6px;
    }
    :deep(.ant3-steps-item-title) {
        height: 28px;
        font-size: 14px;
        color: #262626;
        text-align: left;
        line-height: 22px;
        font-weight: 400;
    }
    :deep(.ant3-steps-item-process > .ant3-steps-item-container > .ant3-steps-item-icon) {
        background-color: #3875ff;
    }
    :deep(.ant3-steps-vertical > .ant3-steps-item > .ant3-steps-item-container > .ant3-steps-item-tail::after) {
        background: #3875ff;
    }
    :deep(.status-step .ant3-steps-vertical > .ant3-steps-item .ant3-steps-item-icon) {
        border-color: #3875ff;
    }
    :deep(.ant3-steps-item-finish .ant3-steps-item-icon > .ant3-steps-icon) {
        color: #3875ff !important;
    }
    .task-status-new {
        cursor: pointer;
    }
    .left-title,
    .right-title {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        letter-spacing: 0;
        text-align: left;
        font-weight: 400;
        height: 31px;
        line-height: 31px;
    }
    .weight-status {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .batch-line {
        width: 100%;
        border-top: 1px solid #d9d9d9;
        margin: 16px 0;
    }
    .weight-status-new {
        font-weight: 600;
        color: #262626;
    }
</style>
